<template>
	<view class="cmtreply ">
		<view class="flex align-center">
			<view class="imgbox"><image :src="info.member_img ? info.member_img : '/static/defaultAvatar.png'" class="tui-avatar"></image></view>
			<view class="tui-nickname-box flex-sub">
				<view class="flex">
					<view class="tui-cmt-nickname">{{ info.member_name }}</view>
				</view>
			</view>
			<rate :current="info.grade" :size="16"></rate>
			<view class="tui-cmt-time">{{ info.created_at }}</view>
		</view>
		<view class="tui-cmt-content mt20">
			<view>{{ info.info }}</view>
			<view class="imglist flex flex-wrap ">
				<image
					:lazy-load="true"
					:src="img + '?imageView2/0/w/200'"
					mode="aspectFill"
					v-for="(img, index) in info.img_url"
					@tap="previewImage(info.img_url, index)"
					:key="index"
				></image>
				<!-- <image src="/static/demo/1.png" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
import rate from '@/components/rate/rate.vue';
export default {
	data() {
		return {};
	},
	props: {
		info: {
			type: Object,
			default: {}
		}
	},
	components: { rate },
	created() {},
	methods: {
		previewImage(imageList, index) {
			uni.previewImage({
				current: imageList[index],
				loop: true,
				urls: imageList
			});
		}
	}
};
</script>

<style lang="scss">
.cmtreply {
	text-align: left;
	line-height: 48upx;
	color: #000;
	margin-bottom: 20upx;
	font-size: 26upx;
	font-weight: 400;
	color: #1c1c1e;
	.imgbox {
		height: 60upx;
		width: 60upx;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 25upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tui-cmt-nickname {
		height: 60upx;
		line-height: 60upx;
	}
	.tui-cmt-time {
		font-size: 20upx;
		color: #adadad;
		margin-top: 10upx;
		line-height: 24upx;
	}
	.tui-cmt-content {
		font-size: 26upx;
		line-height: 54upx;
	}
	.imglist {
		margin-top: 8upx;
		image {
			width: calc((100vw - 90upx) / 3);
			height: calc((100vw - 90upx) / 3);
			margin-bottom: 8upx;
			border-radius: 12upx;
			&:nth-child(3n + 2) {
				margin: 0 16upx;
			}
		}
	}
}
</style>
